<!DOCTYPE html>
<html lang="Zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width:device-width,initial-scale=1">
	<title>分享列表</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="icon" href="favicon.ico" >
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
				<a  class="navbar-brand" href="index.html">
				liuboy
				</a>
			</div>
			<a href="login.html" class="navbar-right navbar-link navbar-text loginUser">登陆/注册</a>
			<div id="a" class="collapse navbar-collapse">
			<ul class="nav navbar-nav" >
			<li><a href="wenzhang.html">文章</a></li>
			<li><a href="fenxiang.html">分享</a></li>
			<li><a href="liuyan.html">留言</a></li>
			</ul>
		</div>
		</div>
	</nav>
	<div>
		<ul class="wenzhang list-group">
			
		</ul>
	</div>
	<ul class="pagination ">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>

    
  </ul>
</body>
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
	 j=0;
	// 获取到数据库里文章的总数，计算页码
	// 第一个函数开始
	// $.post( "http://localhost:801/demo/server/php/fenxiangpage.php",{x:"c",indexof:0},function(data){
	$.post("fenxiangpage.php",{x:"c",indexof:0},function(data){

		// console.log(data);
		var sum = JSON.parse(data);
		// console.log(sum[0]["count(*)"]);
		// console.log(sum.count(*));
		if(sum[0]["count(*)"]%6==0){
		 j=sum[0]["count(*)"]/6;
		}else{
			j=sum[0]["count(*)"]/6+1;
		}
		// j表示页码
		 // console.log(j);
		 // 循环生成按钮
		 var a="<li><a href='#'>1</a></li>";

		 for(i=2;i<=j;i++){
	// $(".pagination").append("<li><a href='#'>"+i+"</a></li>");
			a=a+"<li><a href='#'>"+i+"</a></li>"
			}
	// console.log(a);
		$("ul.pagination").append(a);

		$(".pagination").append("<li><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a> </li>");
		var o = $(".pagination li").eq(1);
	// console.log(o);
		$(o).addClass("active");


	// 请求默认第一页的数据
	$.post("fenxiang.php",{x:"b",indexof:1,j:j},function(wenzhang){
		// 函数开始
	// $.post("http://localhost:801/demo/server/php/fenxiang.php",{x:"b",indexof:1,j:parseInt(j)},function(wenzhang){
		// parseInt()取整
		var wenzhangdata = JSON.parse(wenzhang);
		// console.log(wenzhangdata);
			for(i=0;i<6;i++){
				$(".wenzhang").append("<li class='list-group-item'>"+wenzhangdata[i].content+"<p>"+wenzhangdata[i].datetime+"</p></li>"); 
			}
			}
		);
		// 函数结束

	// 点击按钮设置active并请求数据
	// 开始
		function cookieToJson() {
    	let cookieArr = document.cookie.split(";");
   	 	let obj = {} 
    	cookieArr.forEach((i) => {
        let arr = i.split("=");
        obj[arr[0]] =arr[1];
   		 });
    	return obj
  		}
  		// 结束
  		// 开始
		$(".pagination li").click(function(){
		var index = $(".pagination  li").index(this);
		$(".pagination li[class='active']").removeClass();

		if(0<index&&index<=4){
			$(".pagination li").eq(index).addClass("active");
			document.cookie ="activeindex="+index;

			}else if(index==0){

				if(1<cookieToJson().activeindex){
					$(".pagination li").eq(cookieToJson().activeindex-1).addClass("active");
					console.log(cookieToJson().activeindex-1);
					var activeindexjian = Number(cookieToJson().activeindex)-1;
			// console.log(x);
					document.cookie = "activeindex="+activeindexjian;
					}else{
						document.cookie = "activeindex=2"
						$(".pagination li").eq(cookieToJson().activeindex-1).addClass("active");
						var activeindexjian = Number(cookieToJson().activeindex)-1;
						// console.log(x);
						document.cookie = "activeindex="+activeindexjian;
						}

			}else{

				if(cookieToJson().activeindex<j){
					$(".pagination li").eq(Number(cookieToJson().activeindex)+1).addClass("active");
					console.log(Number(cookieToJson().activeindex)+1);
			 		var activeindexadd = Number(cookieToJson().activeindex)+1;
			 		console.log(activeindexadd);
				 	console.log(j);

				document.cookie = "activeindex="+activeindexadd;
				}else{
					var i = j-1;
					document.cookie = "activeindex="+i;
					console.log(i);
					$(".pagination li").eq(Number(cookieToJson().activeindex)+1).addClass("active");
				// console.log(Number(cookieToJson().activeindex)+1);
				//  var activeindexadd = Number(cookieToJson().activeindex)+1;
				//  console.log(activeindexadd);
				// document.cookie = "activeindex="+activeindexadd;
					}
												};

		
  		// console.log(cookieToJson());
		// index表示点击的第几个按钮
		// console.log(j);
		// console.log(x);
		
		// console.log(x);
		

		
		// 开始
		$.post("fenxiang.php",{x:"b",indexof:index,j:j},function(wenzhang){
		// $.post("http://localhost:801/demo/server/php/fenxiang.php",{x:"b",indexof:index,j:parseInt(j)},function(wenzhang){
			// 输出文章列表
			// console.log(wenzhang);
			$(".wenzhang").children("li").remove();
			var wenzhangdata = JSON.parse(wenzhang);
		// console.log(wenzhangdata);
			for(i=0;i<6;i++){
				$(".wenzhang").append("<li class='list-group-item'>"+wenzhangdata[i].content+"<p>"+wenzhangdata[i].datetime+"</p></li>"); 
			}
			
			});
		// 结束
		});
		// 点击按钮函数结束
	});
		// 第一个函数结束
	
	$.get("userid.php",function(id){
		var userData = JSON.parse(id);
		console.log(userData);
		$(".loginUser").replaceWith("<a href='putongyonghu.html' class='navbar-right navbar-link navbar-text loginUser'>欢迎您，"+userData[0].username+"</a><span class='glyphicon glyphicon-user navbar-right navbar-text' aria-hidden='true'></span>&nbsp<a href='zhuxiao.php' class='navbar-right navbar-link navbar-text'>注销</a>");
	
	});
	
	//
	
 
	
</script>
</html>